<template>
    <div style='overflow: hidden;'>
      <v-breadcrumb>
        <v-breadcrumb-item >
          <v-icon type="home"></v-icon>
          <router-link :to="{ name: 'Index' }">首页</router-link>
        </v-breadcrumb-item>
        <v-breadcrumb-item >
          书籍列表
        </v-breadcrumb-item>
      </v-breadcrumb>
      <!-- 新增 -->
      <v-button type="primary" @click="showAddModal" style="margin: 10px">新增</v-button>
      <v-modal title="新增"
        :visible="addModalVisible"
        @ok="handleAddOk"
        @cancel="handleAddCancel"
        :confirm-loading="addConfirmLoading"
        :closable="closable">
        <v-form direction="horizontal" :model="addForm" :rules="addRule" ref="addForm">
          <v-form-item label="名称" prop="name" has-feedback>
            <v-input size="large" v-model="addForm.name"></v-input>
          </v-form-item>
          <v-form-item label="作者" prop="author" has-feedback>
            <v-input size="large" v-model="addForm.author"></v-input>
          </v-form-item>
          <v-form-item label="链接" prop="url" has-feedback>
            <v-input size="large" v-model="addForm.url"></v-input>
          </v-form-item>
          <v-form-item label="描述" prop="description">
            <v-input v-model="addForm.description" type="textarea"></v-input>
          </v-form-item>
        </v-form>
      </v-modal>
      <!-- 数据 -->
      <v-data-table ref="tableData" stripe bordered
        :data='loadData' :columns='columns' 
        :responseParamsName="{total: 'totalElements', results: 'content'}" 
        :pagination="true" :pageSize="10">
        <template slot="th" slot-scope="props">
          <strong v-if="props.column.field=='id'">操作</strong>
          <strong v-else v-html="props.title"></strong>
        </template>
        <template slot="td" slot-scope="props">
          <div v-if="props.column.field=='id'">
            <router-link :to="{ name: 'BookChapters', params: { bookId: props.content } }">
              <v-icon type="link"></v-icon>
            </router-link>
          </div>
          <span v-else v-html="props.content"></span>
        </template>  
      </v-data-table>
    </div>
</template>

<script>
export default {
  name: "BookIndex",
  data() {
    return {
      loadData(params) {
        return this.$get("/book", params, true).then(data => {
          return data;
        });
      },
      columns: [
        { title: "书名", field: "name" },
        { title: "作者", field: "author" },
        { title: "链接", field: "url" },
        { title: "来源", field: "source" },
        { title: "ID", field: "id" }
      ],
      // 新增
      addModalVisible: false,
      addConfirmLoading: false,
      closable: false,
      addForm: {
        name: "",
        author: "",
        source: "bxwx9",
        url: "",
        description: ""
      },
      addRule: {
        name: [
          {
            required: true,
            message: "请输入名称"
          }
        ],
        author: [
          {
            required: true,
            message: "请输入作者"
          }
        ],
        url: [
          {
            required: true,
            message: "请输入链接"
          }
        ],
        description: [
          {
            required: true,
            message: "请输入描述"
          }
        ]
      }
    };
  },
  methods: {
    // 新增
    showAddModal() {
      this.addModalVisible = true;
    },
    handleAddOk() {
      /* 对话框将在两秒后关闭 */
      this.addConfirmLoading = true;
      this.$post("/book", this.addForm).then(() => {
        this.$message["success"]("添加成功");
        // 刷新
        this.$refs.tableData.refresh();
        // 状态
        this.addModalVisible = false;
        this.addConfirmLoading = false;
      });
    },
    handleAddCancel() {
      this.$refs["addForm"].resetFields();
      this.addModalVisible = false;
    }
  }
};
</script>

<style scoped>
</style>